<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
      高阶函数:
        *高阶函数: 如果有一个函数A A符合下面2个规则中的任何一个 那么A函数就是高阶函数
        *若A函数接收的参数是一个函数,那么A就可以称之为高阶函数
        *若A函数调用的返回值依然是一个函数 那么A就可以称之为高阶函数
        *常见的高阶函数: 数组相关的放阿飞 promise setTimeout 等等
      */

      /*
      高阶函数的案例1
      //如果说checkType函数检测当前是IE浏览器 就会触发回调函数
      //这个函数接受一个函数作为参数,那我们把这种类型的函数称作为高阶函数
      */
      function checkType(callback) {
        // console.log(callback);
        if (true) {
          console.log(callback);
          callback();
        }
      }

      //   checkType被调用的时候里面的参数是实参 也就是会传给上面function checkType里的callback形参 在上面log callback会直接打印实参传入的函数体
      //再回到上面checkType被调用的时候 做判断 如果为true 就打印callback  此时还是函数体
      //实参函数体也是能被调用的  也就是callback()   下面的匿名函数体被调用的话会打印111  所以上面执行callback()  就会输出111
      checkType(() => {
        console.log(111);
      });

      /*
      高阶函数案例2
      //handler事件函数 每次绑定事件的时候 需要传递一个参数 事件函数根据type参数来决定内部的逻辑

      */

      function handler(type) {
        //因为外边的函数在绑定事件的时候因为要传参原因被调用了 所以内部return 的函数才是真正的事件函数
        //因为作用域链的问题 我们可以在内部函数中使用外部函数的变量

        return function (e) {
          if (type === "ie") {
            console.log("慢走");
          } else {
            console.log("欢迎光临");
          }
        };
      }
      document.onclick = handler("ie");
      document.onclick = handler("chrome");

      /*  var a = 1;
      function fn(){
        console.log(a)//1
      }

      function fn2(){
        var a = 2;
        fn();
      }
      fn2() */
    </script>
  </body>
</html>
